<template>
  <view class="container">
    <text class="tip">应在人数 7 人</text>
    <input type="text" placeholder="请输入姓名/学号关键词查询" class="search" />
    <text>已选择 2 人</text>
    <view class="student" v-for="(item, index) in students" :key="index">
      <text>{{ item.name }}</text>
      <text>{{ item.id }}</text>
      <text>{{ item.college }}</text>
      <text>{{ item.major }}</text>
    </view>
    <view class="modal">
      <text>异常说明</text>
      <input type="text" placeholder="请说明原因：" class="reason" />
      <button class="cancel">取消</button>
      <button class="confirm">确认</button>
    </view>
    <button class="batch">+批量添加说明</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      students: [
        {
          name: "陈满",
          id: "20200909",
          college: "A学院",
          major: "A专业"
        },
        {
          name: "王家军",
          id: "20200909",
          college: "A学院",
          major: "A专业"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.tip {
  background-color: #fdd;
  padding: 10rpx;
  display: inline-block;
  margin-bottom: 20rpx;
}
.search {
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}
.student {
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 10rpx;
  margin-bottom: 10rpx;
}
.modal {
  background-color: #fff;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 20rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.reason {
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 10rpx;
  margin-bottom: 10rpx;
}
.cancel,
.confirm {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 8rpx;
}
.cancel {
  background-color: #ccc;
  color: #000;
  margin-right: 10rpx;
}
.confirm {
  background-color: #f00;
  color: #fff;
}
.batch {
  background-color: #00f;
  color: #fff;
  border-radius: 8rpx;
  margin-top: 20rpx;
}
</style>